import Vue from 'vue';
import Vuex from 'vuex';
import VueRouter from 'vue-router';
import Lazyload from 'vue-lazyload';
import App from './views/app.vue';
import store from './vuex/store'
import ToastPlugin from './plugins/toast'
import AlertPlugin from './plugins/alert'
import ConfirmPlugin from './plugins/confirm'

Vue.use(VueRouter);

Vue.use(Lazyload, {
    error: '/images'
});

Vue.use(ToastPlugin);
Vue.use(AlertPlugin);
// Vue.use(ConfirmPlugin);

const router = new VueRouter({
    history: false
});

let history = window.sessionStorage
history.clear()
let historyCount = history.getItem('count') * 1 || 0
history.setItem('/', 0)

/**
 * sync router loading status
 **/
const commit = store.commit || store.dispatch
router.beforeEach(({ to, from, next, abort }) => {
    console.log(to.path);
    const toIndex = history.getItem(to.path)
    const fromIndex = history.getItem(from.path)
    if (toIndex) {
        if (toIndex > fromIndex) {
            commit('UPDATE_DIRECTION', 'forward')
        } else {
            commit('UPDATE_DIRECTION', 'reverse')
        }
    } else {
        ++historyCount
        history.setItem('count', historyCount)
        to.path !== '/' && history.setItem(to.path, historyCount)
        commit('UPDATE_DIRECTION', 'forward')
    }

    commit('SET_LOADING_STATUS', true)
    setTimeout(next, 50)
})
router.afterEach(() => {
    commit('SET_LOADING_STATUS', false)
})

router.map({
    "/index": {
        name: 'index',
        title: '首页',
        component: function(resolve) {
            require(['./views/index.vue'], resolve);
        },
        showNavbar: false,
        showTabbar: true
    },
    "/centerlist": {
        name: 'centerlist',
        title: '场馆列表',
        component: function(resolve) {
            require(['./views/booking/centerList.vue'], resolve);
        },
        showNavbar: true,
        showTabbar: false,
        headerPadding: true
    },
    "/centerdetail/:centerid": {
        name: 'centerdetail',
        title: '场馆详情',
        component: function(resolve) {
            require(['./views/booking/centerDetail.vue'], resolve);
        },
        showNavbar: true,
        showTabbar: false
    },
    "/booking/:bookingtype/:courtid": {
        name: 'booking',
        title: '场馆详情-预定',
        component: function(resolve) {
            require(['./views/booking/booking.vue'], resolve);
        },
        showNavbar: true,
        showTabbar: false,
        headerPadding: true
    },
    "*": {
        name: 'Index',
        title: '首页',
        component: function(resolve) {
            require(['./views/index.vue'], resolve);
        },
        showNavbar: false,
        showTabbar: true
    }
});

router.alias({
    // 匹配 /a 时就像是匹配 /a/b/c
    '/': '/index',
});

// router.beforeEach(function(transition) {
//     transition.abort()
// });

// router.afterEach(function(transition) {
//     setTimeout(() => router.app.showLoading(false), 1000);
// });

router.start(Vue.extend(App), '#main');
